/* eslint-disable */
import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { List, Empty, Button, Tag } from 'antd';
import { ArrowLeftOutlined, ClockCircleOutlined, UserOutlined, FileTextOutlined, CheckCircleOutlined } from '@ant-design/icons';
import CommonAside from '../../components/commonAside/index';
import CommonFooter from '../../components/commonFooter/inedx';
import './index.css';

const SearchResults = () => {
    const location = useLocation();
    const navigate = useNavigate();
    const { results: searchResults = [], query = '' } = location.state || {};

    const goBack = () => {
        navigate(-1);
    };

    const getRandomColor = () => {
        const colors = ['#f50', '#2db7f5', '#87d068', '#108ee9', '#722ed1'];
        return colors[Math.floor(Math.random() * colors.length)];
    };

    const handleItemClick = (item) => {
        // 根据项目类型设置路径
        const path = item.type === 'test' ? '/task/test' : item.path;
        navigate(path);
    };

    const renderItemContent = (item) => (
        <div className="item-content" onClick={() => handleItemClick(item)}>
            <h3 className="item-title">
                {item.title}
                <Tag color={item.type === 'test' ? 'volcano' : 'magenta'} style={{ marginLeft: '20px' }}>
                    {item.type === 'test' ? '心理测试' : '文章'}
                </Tag>
            </h3>
            <div className="item-meta">
                {item.type === 'article' ? (
                    <>
                        <div className="tags">
                            {item.tags?.map((tag, index) => (
                                <Tag key={index} color={getRandomColor()}>
                                    {tag}
                                </Tag>
                            ))}
                        </div>
                        <div className="info">
                            <span>
                                <UserOutlined /> {item.author}
                            </span>
                        </div>
                    </>
                ) : (
                    <div className="test-info">
                        <Tag 
                          color={item.status === 1 ? '#f50' : '#87d068'}
                          style={{width:"120px",marginTop:"15px"}}
                        >
                            <CheckCircleOutlined /> 
                            {item.status === 1 ? '测试不可删除' : '测试可删除'}
                        </Tag>
                        {item.types && (
                            <Tag color="#2db7f5">
                                类型 {item.types}
                            </Tag>
                        )}
                    </div>
                )}
            </div>
        </div>
    );

    return (
        <div className="layout-container">
            <CommonAside className="layout-aside" />
            <div className="layout-content">
                <div className="search-results-container">
                    <div className="search-header">
                        <Button 
                            type="link" 
                            icon={<ArrowLeftOutlined />} 
                            onClick={goBack}
                            className="back-button"
                        >
                            返回
                        </Button>
                        <h3 className="search-title" style={{fontFamily:"宋体"}}>搜索结果: {query}</h3>
                    </div>

                    {searchResults.length > 0 ? (
                        <List
                            dataSource={searchResults}
                            renderItem={(item) => (
                                <List.Item className="item-row">
                                    {item.type === 'article' && item.imageUrl && (
                                        <div className="item-image">
                                            <img alt={item.title} src={item.imageUrl} />
                                        </div>
                                    )}
                                    {renderItemContent(item)}
                                </List.Item>
                            )}
                        />
                    ) : (
                        <div className="no-results">
                            <Empty
                                description="暂无搜索结果"
                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                            />
                        </div>
                    )}
                </div>
            </div>
            <CommonFooter className="layout-footer" />
        </div>
    );
};

export default SearchResults;